<mina-side-panel-stepper [activeStep]="activeStep"
												 [steps]="[step1, step2]"></mina-side-panel-stepper>

<ng-template #step1>
	<div class="fx-row-vert-cent flex-between h-xl lh-xl pl-12 pr-12">
		<div class="f-600 secondary">Network Latencies</div>
		<ng-container *ngTemplateOutlet="toggle"></ng-container>
	</div>
	<mina-snarks-work-pool-statistics></mina-snarks-work-pool-statistics>
</ng-template>

<ng-template #step2>
	<div class="fx-row-vert-cent flex-between h-xl lh-xl pl-12 pr-12">
		<div class="fx-row-vert-cent">
				<span class="mina-icon icon-200 mr-10 tertiary primary-hover pointer"
							(click)="removeActiveWorkPool()">arrow_back
				</span>
			<div class="f-600 secondary">Detail</div>
		</div>
		<div class="fx-row-vert-cent">
			<button class="btn-primary mr-10"
							(click)="openNavDropdown($event)">
        <span class="fx-row-vert-cent">
          Open in
          <span class="mina-icon icon-200 f-18 ml-5">arrow_drop_down</span>
        </span>
			</button>
			<ng-container *ngTemplateOutlet="toggle"></ng-container>
		</div>
	</div>
	<mina-snarks-work-pool-details class="h-minus-xl flex-column"></mina-snarks-work-pool-details>
</ng-template>

<ng-template #toggle>
	<button class="h-sm w-sm fx-row-full-cent btn-selected p-0"
					(clickOutside)="detach()"
					(click)="toggleSidePanel()">
		<span class="mina-icon f-20">view_sidebar</span>
	</button>
</ng-template>

<ng-template #navDropdown>
	<div class="flex-column w-100 popup-box-shadow-weak border-rad-6 bg-surface-top border">
		<div class="h-lg lh-lg pl-12 pr-12 pointer primary bg-container-hover"
				 (click)="goToScanState()">Scan state
		</div>
	</div>
</ng-template>
